<template>
  <div class="app-container">
    用户地址

    <!-- <el-button type="text" v-for="items in user" :key="items._id"  @click="getUserAddress(items._id)">{{items.userName}}</el-button> -->
    <el-table
      v-loading="loading"
      :data="user.slice((currentPage - 1) * PageSize, currentPage * PageSize)"
      style="width: 100%"
    >
      <el-table-column prop="createdAt" label="创建时间" />
      <el-table-column label="名称">
        <template slot-scope="scope">
          <div @click="showSlide(scope.row)" style="height: 46px">
            {{ scope.row.userName }}
          </div>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <!-- scope.row获取当前这一条数据 -->
          <el-button type="primary" size="small" @click="edituser(scope.row)"
            >点击查看用户地址</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="用户地址信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <p v-for="(element, index) in address" :key="element.regions">
        {{ index + 1 }}.省市区：{{ element.regions }} <br />详细地址：{{
          element.address
        }}
      </p>
      <div>{{ add }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-pagination
      background
      layout="prev, pager, next,jumper"
      :total="totalCount"
      :page-size="PageSize"
      @current-change="handleCountChange"
    />
    <slide-view
      :show="showFlag"
      :showFlag.sync="showFlag"
      :message="message"
    ></slide-view>
  </div>
</template>
<script>
import SlideView from "@/views/mixin/slideminxin";
import { getUsersP, getUsersAddressById } from "../../api/user";
export default {
  mixins: [SlideView],
  name: "AddressList",
  components: {},
  data() {
    return {
      loading: true,
      add: "",
      id: "",
      address: [],
      dialogVisible: false,
      user: [], // 总数据
      currentPage: 1, //  默认显示第几页
      totalCount: 1, // 总条数
      PageSize: 10,
    };
  },
  created() {
    this.initUsers();
  },
  methods: {
    async initUsers() {
      const result = await getUsersP({
        per: 400,
        page: 1,
      });
      console.log(111, result);
      this.user = result.users;
      if (this.user.length > 0) {
        this.loading = false;
      }
      this.totalCount = result.totalCount;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleCountChange(val) {
      this.currentPage = val;
    },

    // 弹出修改弹框
    async edituser(user) {
      this.dialogVisible = true;
      // this.user.name = user.userName;
      this.id = user._id;

      const result = await getUsersAddressById(this.id, {
        per: 10,
        page: 1,
      });
      console.log(result);
      this.address = result.addresses;
      console.log(this.address);

      if (this.address.length == 0) {
        this.add = "该用户没有地址信息";
      } else {
        this.add = "";
      }
    },
  },
};
</script>
